<template>
  <div>
    <div class="color-legend com-flex-c">
      <span>颜色图例(摄氏度)</span>
      <div class="com-flex-r div-bigBox">
        <div
          class="color-div"
          v-for="(div, index) in items"
          :key="index"
          :style="{ backgroundColor: div.color }"
        ></div>
      </div>
      <div class="com-flex-r">
        <div class="color-num" v-for="div in num">
          {{ div.num }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const items = reactive([
  {
    color: "#2D5EFF",
  },
  {
    color: "#2DFF9F",
  },
  {
    color: "#F8FF2D",
  },
  {
    color: "#FF902D",
  },
  {
    color: "#FF3C2D",
  },
]);

const num = reactive([
  {
    num: 0,
  },
  {
    num: 15,
  },
  {
    num: 20,
  },
  {
    num: 25,
  },
  {
    num: 30,
  },
  {
    num: 36,
  },
]);
</script>

<style lang="scss" scoped>
.color-legend {
  float: right;
  width: 900px;
  height: 270px;
  background-image: url('/imgs/20.png');
  background-size: 100% 100%;
  span {
    font-size: 36px;
    color: #fefeff;
    margin-top: 50px;
    margin-left: 40px;
  }
}
.color-div {
  width: 160px;
  height: 20px;
}
.color-num {
  color: #fefeff;
  padding: 0 72px;
  margin-left: -28px;
  margin-top: 5px;
  font-size: 36px;
}
.div-bigBox {
  margin-top: 20px;
  margin-left: 40px;
}
</style>
